.borderEffect {
  --picSize:400px;
  position: relative;
  z-index: 0;
  --border-radius: 10px;
  --border-size: 10px;
  --effect-margin: 20px; /* border 与 内容的间距 */
  --bgColor: oklch(84.1% 0.238 128.85);

  padding: calc(var(--border-size) + var(--effect-margin));
  border-radius: var(--border-radius);
  overflow: hidden;
  .resultImg {
    max-width: var(--picSize);
    max-height: var(--picSize);
    box-sizing: content-box;
  }
  @keyframes rotate {
    100% {
      transform: rotate(-1turn);
    }
  }
  &::before {
    content: '';
    position: absolute;
    --w: calc(var(--picSize) * 2);
    --h: calc(var(--picSize) * 2);

    width: var(--w);
    height: var(--h);
    top: calc(50% - var(--w) * 1 / 2);
    left: calc(50% - var(--h) * 1 / 2);
    // transform: translate(-50%, -50%);
    background: conic-gradient(
      red 0deg,
      transparent 80deg,
      transparent 90deg,
      blue 90deg,
      transparent 170deg,
      transparent 180deg,
      green 180deg,
      transparent 270deg,
      transparent 270deg,
      yellow 270deg,
      transparent 350deg,
      transparent 360deg
    );
    animation: rotate 2s linear infinite;
    z-index: -1;
  }
  &::after {
    content: '';
    position: absolute;
    --w: calc(100% - var(--border-size) * 2);
    --h: calc(100% - var(--border-size) * 2);

    width: var(--w);
    height: var(--h);

    top: calc(50% - var(--w) * 1 / 2);
    left: calc(50% - var(--h) * 1 / 2);
    background: var(--bgColor);
    border-radius: var(--border-radius);
    z-index: -1;
  }
}
